<template>
  <div class="conMain">
    <div>
      <el-button type="primary" size="medium" plain @click="copy(tturl)">推广总链接</el-button>
      <el-button type="success" size="medium" style="margin-left: 30px;" plain  @click="qrcode(0,tturl)">推广总二维码</el-button>
    </div>

      <div slot="header" class="clearfix" style="margin-top:20px">
        <div class="container">
          <el-form :inline="true" size="small" label-width="120px">
              <el-form-item label="结算类型">
                <el-radio-group v-model="params.jslx" type="button" @change="getList()">
                  <el-radio-button label="">全部 </el-radio-button>
                  <el-radio-button  label="1">日结</el-radio-button>
                  <el-radio-button  label="2">月结</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="运营商">
                <el-radio-group v-model="params.type" type="button" @change="getList()">
                  <el-radio-button label="">全部 </el-radio-button>
                  <el-radio-button  label="1">联通</el-radio-button>
                  <el-radio-button  label="2">移动</el-radio-button>
                  <el-radio-button  label="3">电信</el-radio-button>
                  <el-radio-button  label="4">广电</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="商品名称">
                  <el-input clearable v-model="params.name"  placeholder="请输入商品名称" />
              </el-form-item>
              <el-form-item label=" ">
                <el-button type="primary"  size="small" class="searchBtn" @click="handleSearch" icon='el-icon-search'>查 询</el-button>
                <el-button type="info"  @click="handleRet" plain>重置</el-button>
              </el-form-item>
          </el-form>
        </div>
      </div>


    <div class="goods">
      <div class="glist" v-for="(item,index) in list">
        <div class="glist-top">
          <img class="glist-img" :src="item.image" fit="fill"></img>
        </div>
        <div class="glist-title">
          {{item.name}}
        </div>
        <div class="glist-des" >
          {{item.memo}}
        </div>
        <el-row class="glist-bottom">
          <el-col :span="12" style="color:red">佣金：{{item.agfee}}</el-col>
          <el-col :span="12" style="color:red">类型：
            <el-tag v-if="item.jslx === 1" type="success" size="mini" disable-transitions>日结</el-tag>
						<el-tag v-if="item.jslx === 2" type="success" size="mini" disable-transitions>月结</el-tag>
          </el-col>
        </el-row>
          <el-row class="glist-bottom">
          <el-col :span="6" style="color:#e6a23c;" ><a v-clipboard:copy="copyurl"   @click="copy(item.url)">推广链接</a></el-col>
          <el-col :span="6" style="color:#67c23a;text-align: right;"><a @click="qrcode(item.id,item.url,item.name)">推广码</a></el-col>
        </el-row>
        <el-row class="glist-bottom">
          <el-col :span="8" style="color:red">商品编码：</el-col>
          <el-col :span="6" style="color:#e6a23c;" >{{item.goods_code}}</el-col>
        </el-row>
      </div>
    </div>
    <el-dialog title="推广码"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    left  width="30%">
        <div style="color:#686868;margin-bottom: 10px;">
          {{copyurl}}
        </div>
        <div style="text-align: center;">
          <!-- <el-image
              style="width: 200px; height: 200px"
              :src="qrcodeurl">
          </el-image> -->
          <el-image
              :src="qrcodeurl">
          </el-image>
          <div style="color:#686868">
            {{qrtitle}}
          </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  import { agent_goods,agent_qrcode } from  '@/api/agent'
  
  export default {
    data() {
      return {
        dialogVisible:false,
        copyurl:'',
        list:[],
        tturl:'',
        qrtitle:'',
        qrcodeurl:'',
        params: {
          jslx:'',
          name:'',
          type:'',
        },
      }
    },
    created() {
      agent_goods().then(res => {
        this.list=res.data.list
        this.tturl=res.data.tturl
      })
    },
    methods: {
      handleSearch(){
        this.getList()
      },
      handleRet(){
        this.params={
          status:'',
          createtime:[],
          sn:'',
          phone:'',
          name:'',
          aname:'',
          level:'',
          page: 1,
          pagesize:3,
        }
        this.getList()
      },
      getList(){
        agent_goods(this.params).then(res => {
          this.list=res.data.list
          this.tturl=res.data.tturl
        })
      },
      copy(url){
      　this.copyurl=url
          //新建一个文本框
				let oInput = document.createElement('input');
				//赋值给文本框
				oInput.value = url;
				document.body.appendChild(oInput);
				// 选择对象;
				oInput.select();
				// 执行浏览器复制命令
				document.execCommand("Copy");
				//复制完成删除掉输入框
				oInput.remove()
        this.$notify({
          title:'推广链接已复制',
          message:url,
          type: 'success',
          duration: 2000
        })
      },
      qrcode(id,url,name=""){
        agent_qrcode({id:id}).then(res => {
          this.dialogVisible=true
          this.qrcodeurl=res.data.hb
           this.qrtitle=name?name:'总二维码'
           this.copyurl=url
        })
      }
    },
  }

</script>

<style lang="scss">
  .conMain{
    margin-bottom: 20px;
  }
  .goods{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;

  }
  .glist{
    border:1px solid #cccccc;
    width:250px;
    margin-top: 20px;
    margin-right: 20px;
    .glist-top{
      height:200px;
      .glist-img{
        width:100%;
        height:100%;
      }
    }
    .glist-title{
      padding: 6px 4px;
      font-size: 16px;
      text-align: center;
    }
    .glist-des{
      padding:4px 4px 8px 4px;
      font-size: 15px;
      min-height: 40px;
      color:#6f7071;
    }
    .glist-bottom{
      padding: 4px 4px 10px;
      font-size: 15px;
    }
  }


</style>
